<template>

    <transition name="slide">

      <music-list  :image="singer.cover" :name="singer.title" :songList="songList"></music-list>

    </transition>

</template>

<script>
import MusicList from '../base/musiclist.vue'
import {mapGetters} from 'vuex'
export default {
  data() {
    return {
      songList: [],
      params: {
        type: 1,
        json: 1,
        utf8: 1,
        onlysong: 0,
        g_tk: 5381,
        loginUin: 0,
        hostUin: 0,
        format: 'json',
        inCharset: 'utf8',
        outCharset: 'utf-8',
        notice: 0,
        platform: 'yqq.json',
        needNewCode: 0
      }
    }
  },
  computed: {
    ...mapGetters([
      'singer'
    ])
  },
  created() {
    this.getSongList()
  },
  methods: {
    getSongList() {
      if (!this.singer.content_id) {
        this.$router.push({path: '/recommend'})
      }
      this.axios.get('https://api.bzqll.com/music/tencent/songList?key=579621905', {
        params: {id: this.singer.content_id}
      })
        .then((res) => {
          if (res.status == 200) {
            let resSongs = res.data.data.songs
            var songs = []
            resSongs.forEach(element => {
              songs.push({mid: element.id,
                album: ' ',
                img: element.pic,
                name: element.name,
                singer: element.singer,
                duration: element.time,
                url: element.url,
                id: Math.random() * 1000000000})
            })
            this.songList = songs
          }
        })
    }
  },
  components: {
    MusicList
  }
}
</script>
<style lang="scss" scoped>
.slide-enter,
.slide-leave-to {
  transform: translateX(100%);
}
.slide-enter-active,
.slide-leave-active {
  transition: all 0.3s;
}
</style>
